import React from 'react'
import style from './index.less'
import { connect } from 'dva';
import { Row, Col, Icon,DatePicker  } from 'antd'
import moment from 'moment'
import { NoData } from '../../../components'

/**
 * ToolBar 工具栏
 * 引用组件
 * DefinitionList 定义列表
 * PortSelect 	产品下拉框
 * BenchSelect 基准下拉框
 * TimeRadio 时间段单选组合
 */
import DefinitionList from '../../../components/DefinitionList'
import PortSelect from '../../../components/toolbar/PortSelect'
import BenchSelect from '../../../components/toolbar/BenchSelect'

const ToolBar = ({ lPortId, cBenchCode, timeRange, location }) => (
  <Row className='toolbar' type="flex" justify="space-between">
    <Col>
      {/*<Icon type="search" style={{ fontSize: 18 }} />Search*/}
      <Icon type="search" style={{ fontSize: 16 }} />Search
    </Col>
    <Col>
      <DefinitionList name='产品组合：' value={<PortSelect id={lPortId} location={location} productType='SIMU'/>} />
      {
        ((location.query.tag!=='holdThrough')&&(location.query.tag!=='riskAnalysis')&&(location.query.tag!=='styleResearch'))&&<DefinitionList name='业绩基准：' value={<BenchSelect id={cBenchCode} location={location} />} />
      }
      
    </Col>
  </Row>
)

import { Tabtitle } from '../../../components'
import MenuList from '../components/MenuList'
import PortfolioPerformance from './PortfolioPerformance'
import HoldingAnalysis from './holdingAnalysis'
import PerformanceAttribution from './PerformanceAttribution'
import HoldThrough from './HoldThrough'
import RiskAnalysis from './RiskAnalysis'
import StyleResearch from './StyleResearch'


const menus=[
  {
      key:'portfolioPerformance',
      text:'组合业绩'
  },
  {
      key:'holdingAnalysis',
      text:'持仓分析'
  },
  // {
  //     key:'holdThrough',
  //     text:'持仓穿透'
  // },
  {
      key:'performanceAttribution',
      text:'业绩归因'
  },
  {
      key:'riskAnalysis',
      text:'风险分析'
  },
  {
      key:'styleResearch',
      text:'风格研究'
  }
]

const CombinatorialAnalysis = ({ combinatorialAnalysis, portfolio, location, dispatch, children }) => {

  const tag = location.query.tag || 'portfolioPerformance'
  const props = {
    ...combinatorialAnalysis,
    ...portfolio,
    location,
  }

  const changeRouter=(payload)=> {
    console.log(4333333,payload)

    dispatch({
      type: `app/changeRouter`,
      payload
    })
    if(payload.query.tag == 'performanceAttribution'){
      dispatch({
        type: `portfolio/getBenchListN`,
        payload
      })
    }else{
      dispatch({
        type: `portfolio/getBenchList`,
        payload
      })
    }

  }
  
  return (
    <div className={`${style.root}`}>
      <Tabtitle value={'组合分析'} />
      <div className="content-inner">
        <ToolBar {...props} />
        <MenuList location={location} dispatch={dispatch} menus={menus} changeRouter={changeRouter} />
        <Row className='contentDisplay'>
          <Col>
            {
              ((tag === 'portfolioPerformance') && <PortfolioPerformance {...props} />) ||
              ((tag === 'holdingAnalysis') && <HoldingAnalysis {...props} />) ||
              ((tag === 'performanceAttribution') && <PerformanceAttribution {...props} />) ||
              ((tag === 'holdThrough') && <HoldThrough {...props} />) ||
              ((tag === 'riskAnalysis') &&  <RiskAnalysis {...props} />) ||
              ((tag === 'styleResearch') &&  <StyleResearch {...props} />)
              
            }
          </Col>
        </Row>
      </div>
    </div>
  );
}

export default connect(({ combinatorialAnalysis, portfolio }) => ({ combinatorialAnalysis, portfolio }))(CombinatorialAnalysis)